<template>
  <div
    class="widget-layer no-event-parent scrollbar-slinder"
    :class="direction"
    style="max-height: 300px"
  >
    <!-- <div class="maptree-header color-white">
        <span id="kongge" style="font-size: 16px; text-indent: 8px"> 图层管理</span>
        <i class="el-icon-close" @click="closeMapTreePannel"></i>
        </div> -->
    <el-tree
      class="scrollbar-slinder"
      style="max-width: 400px"
      :data="treeData"
      node-key="id"
      ref="treep"
      :props="defaultProps"
      show-checkbox
      @check-change="handleCheckChange"
      @node-click="onCilck"
      :default-checked-keys="checkKeys"
      :default-expand-all="true"
    >
    </el-tree>
    <slot></slot>
  </div>
</template>

<script>
import { Cartesian3, BoundingSphere, NearFarScalar, Color } from "cesium";
export default {
  name: "WidgetPanel",
  props: {
    title: {
      type: String,
      default: "标题",
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
    icon: {
      type: String,
      default: "el-icon-setting",
    },
    direction: {
      type: String,
      default: "left",
    },
    titleWidth: {
      type: String,
      default: "350px",
    },
    pipeline: {
      type: Array,
      default: [],
    },
  },
  mounted() {
    this.treeData.forEach((e) => {
      if (e.id == "guandaolist") {
        e.children = this.pipeline;
      }
    });
  },
  watch: {
    pipeline: function (n) {
      if (!n.length) return [];
      this.treeData.forEach((e) => {
        if (e.id == "guandaolist") {
          e.children = n;
        }
      });
      this.$nextTick(() => {
        this.checkKeys = ["gzKml", "tianditu"];
        n.forEach((e) => {
          this.checkKeys.push(e.id);
        });
      });
    },
  },
  data() {
    return {
      treeData: [
        // {
        //   id: "jichu",
        //   name: "基础图层",
        //   showCheckbox: false,
        //   hasChildren: false,
        //   children: [
        //     {
        //       id: "gzKml",
        //       parentId: "jichu",
        //       name: "广州地图",
        //       showCheckbox: false,
        //       hasChildren: false,
        //     },
        //     {
        //       id: "tianditu",
        //       name: "天地图",
        //       parentId: "jichu",
        //       showCheckbox: false,
        //       hasChildren: false,
        //     },
        //     {
        //       id: "dixia",
        //       parentId: "jichu",
        //       name: "地下模式",
        //       showCheckbox: false,
        //       hasChildren: false,
        //     },
        //     {
        //       id: "touming",
        //       parentId: "jichu",
        //       name: "透明模式",
        //       showCheckbox: false,
        //       hasChildren: false,
        //     },
        //   ],
        // },
        {
          id: "guandaolist",
          name: "链列表",
          showCheckbox: false,
          hasChildren: false,
          children: [],
        },
      ],

      defaultProps: {
        children: "children",
        label: "name",
      },
      viewidd: "",
      checkKeys: ["gzKml", "tianditu"],
    };
  },
  methods: {
    onCilck(e) {
      if (e.position) {
        this.$emit("toLine", e);
      }
    },
    handleCheckChange(e) {
      if (e.parentId == "jichu") {
        this.$store.state.layerControl[e.id] =
          !this.$store.state.layerControl[e.id];
        if (e.id == "dixia") {
          //
          window.viewer.scene.screenSpaceCameraController.enableCollisionDetection =
            !this.$store.state.layerControl[e.id];
          //设置地球透明
          window.viewer.scene.globe.translucency.enabled =
            this.$store.state.layerControl[e.id];
          window.viewer.scene.globe.translucency.frontFaceAlphaByDistance =
            new NearFarScalar(400.0, 0.5, 8000, 0.9);
        } else if (e.id == "touming") {
          window.viewer.scene.globe.showGroundAtmosphere =
            !this.$store.state.layerControl[e.id];
          window.viewer.scene.screenSpaceCameraController.enableCollisionDetection =
            !this.$store.state.layerControl[e.id];
          window.viewer.scene.globe.baseColor = Color.TRANSPARENT;
          window.viewer.scene.globe.translucency.enabled = true;
          window.viewer.scene.globe.undergroundColor = undefined;
        }
      } else {
        // console.log(e)
        this.$emit("showLine", e);
      }

      // this.$store.state.layerControl.tianditu=!this.$store.state.layerControl.tianditu
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/backgrounds.scss";
.widget-layer {
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  &.right {
    align-items: flex-end;
  }
  .widget-panel-title {
    padding: 6px 8px;
    // width: 350px;
    margin-bottom: 18px;
    span {
      font-size: 20px;
    }
  }
  &.left .widget-panel-title {
    background: linear-gradient(
      90deg,
      $background-black 0,
      rgba(0, 0, 0, 0) 0.65
    );
    span {
      margin-right: 8px;
    }
  }
  &.right .widget-panel-title {
    flex-direction: row-reverse;
    background: linear-gradient(
      -90deg,
      $background-black 0,
      rgba(0, 0, 0, 0) 0.65
    );
    span {
      margin-left: 8px;
    }
  }
}
</style>
<style lang="scss">
@import "@/styles/backgrounds.scss";
.widget-layer {
  .el-tree {
    // font-size: 16px;
    // background: transparent;
    color: #fff;
    // max-height: calc(100% - 200px);
    // max-height: 100%;
    overflow: auto;
    // padding: 0 8px;
    // max-width: 380px;
    /*图标颜色*/
    // .el-tree-node__expand-icon {
    //     color: #698;
    // }

    /*当鼠标点击tree的节点时显示的背景色,   字体颜色 */
    .el-tree-node:focus > .el-tree-node__content {
      background-color: $active-tree !important;
      color: #fff;
    }
    /**透明色*/
    .el-tree-node__content:hover .el-tree-node__expand-icon.is-leaf {
      color: transparent;
    }

    /*选中节点 icon图标的颜色*/
    .el-tree-node:focus > .el-tree-node__content .el-tree-node__expand-icon {
      color: #985;
    }

    /*当鼠标移动时,节点显示的背景色*/
    .el-tree-node__content:hover {
      background-color: $active-tree;
    }

    /*当鼠标点击后,再点击空白地方,节点失去焦点时显示的背景色*/
    .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content {
      background-color: $active-tree;
    }
  }
}
</style>
